<template>
  <view class="content">
    <view style="position: relative">
      <image
        class="bg"
        src="http://prsr.4006889521.cn:9521/ccsPcService/Member/BackAdvertPic/%E6%98%9F%E6%A2%A6%E4%BF%9D%E6%A1%A3%E6%A1%88%E5%9B%BE.jpg"
        mode="widthFix"
      ></image>
      <view
        class="wearers"
        :style="{ justifyContent: wearers.length > 2 ? 'start' : 'center' }"
      >
        <view class="add-user" @click="addWearer">
          <image
            class="ic-add-user"
            src="../../static/ic_add_user.png"
            mode="widthFix"
          ></image>
          <text class="add-user-text">添加佩戴者</text>
        </view>
        <view
          class="add-user"
          @click="selectWearer(index)"
          v-for="(wear, index) in wearers"
          :key="index"
        >
          <view class="wear-avatar" :class="{ active: selectedWearerIndex == index }">
            <image class="wear-icon" :src="wear.Icon" :class="{ active: selectedWearerIndex == index }"></image>
            <text class="wear-relate">
              {{ wear.WeareaRelate }}
            </text>
          </view>
          <text
            class="add-user-text"
            :class="{ active: selectedWearerIndex == index }"
            >{{ wear.WearerName }}</text
          >
        </view>
      </view>
    </view>
    <navBar class="nav-bar" title="星梦保档案"></navBar>

    <view class="card" v-if="newestStarHistory.Lsph">
      <view class="card-title">TA的星梦保档案</view>
      <view class="card-row">
        <view class="row-key">验配时间</view>
        <view class="row-value">{{ newestStarHistory.FittingDate }}</view>
        <view class="row-value detail-btn" @click="showXmbDoc">查看详情</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="row-key">门店</view>
        <view class="row-value">{{ newestStarHistory.ShopName }}</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="row-key"></view>
        <view class="row-value">左眼</view>
        <view class="row-value">右眼</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="row-key">球镜</view>
        <view class="row-value">{{ newestStarHistory.Lsph }}</view>
        <view class="row-value">{{ newestStarHistory.Rsph }}</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="row-key">柱镜</view>
        <view class="row-value">{{ newestStarHistory.Lcyl }}</view>
        <view class="row-value">{{ newestStarHistory.Rcyl }}</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="row-key">提交时间</view>
        <view class="row-value">{{ newestStarHistory.VerifyDate }}</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-row">
        <view class="row-key">状态</view>
        <view class="row-value">{{ newestStarHistory.VerifyStatus }}</view>
      </view>
    </view>
    <view class="card" v-else>
      <view class="card-title">TA的星梦保档案</view>
      <view class="card-row">
        <view class="row-value active-btn" @click="activeXmbNow">立即激活星梦保</view>
      </view>
    </view>
    <view class="card2" v-if="newestStarHistory.VerifyStatus == '已审核'">
      <view class="card-title">
        <view>视力复查</view>
        <view class="add" @click="addReview">新增视力复查</view>
      </view>
      <view
        class="sub-card"
        v-for="(item, index) in StarDreambVisionReviewInfor"
        :key="item.VhId"
      >
        <view class="sub-card-title">
          <text class="text">第{{ index + 1 }}次视力复查</text>
          <view class="edit" @click="editReview(index)">编辑</view>
          <view class="delete" @click="deleteReview(index)">删除</view>
        </view>
        <view class="time">复查时间：{{ item.FittingDate }}</view>
        <view class="card-row">
          <view class="key"></view>
          <view class="val1">左眼</view>
          <view class="val2">右眼</view>
        </view>
        <view class="card-row">
          <view class="key">球镜</view>
          <view class="val1">{{ item.Lsph }}</view>
          <view class="val2">{{ item.Rsph }}</view>
        </view>
        <view class="card-row">
          <view class="key">柱镜</view>
          <view class="val1">{{ item.Lcyl }}</view>
          <view class="val2">{{ item.Rcyl }}</view>
        </view>
        <view v-if="item.IsAllowApply" class="apply" @click="renew(index)">
          申请换新镜片{{ item.ReplaceLensStatus? `(${item.ReplaceLensStatus})` : '' }}
        </view>
        <view v-else>
          {{ item.ReplaceLensStatus }}{{ item.mailingname ? `,${item.mailingname},单号: ${item.mailingnumber}` : '' }}
        </view>
      </view>
    </view>

    <uni-popup ref="popupAddWearer" type="center" :isMaskClick="false">
      <addWearer
        @onCancel="onCancelAddWearer"
        @onConfirm="onConfirmAddWearer"
      ></addWearer>
    </uni-popup>
    <!-- // 添加视力复查 -->
    <uni-popup
      ref="popupAddReview"
      type="center"
      :isMaskClick="false"
      @change="onAddReviewDialogChange"
    >
      <add_review
				:edit="editStarDreambVisionReviewInfor"
        @close="closeAddReview"
        @submit="submitAddReview"
      ></add_review>
    </uni-popup>
    <!-- // 换新信息填写 -->
    <uni-popup
      ref="popupRenew"
      type="center"
      :isMaskClick="false"
      @change="onPopupRenewChange"
    >
      <renew
        @close="closeRenew"
        :receiver="Receiver"
        @submit="submitRenew"
      ></renew>
    </uni-popup>
	<uni-popup
	  ref="popupXmbDoc"
	  type="center"
	  :isMaskClick="false"
	>
    <xmbdoc_dialog
      @close="closeXmbDocDialog"
    ></xmbdoc_dialog>
	</uni-popup>
  </view>
</template>

<script>
import navBar from "../../widgets/nav_bar.vue";
import addWearer from "../../widgets/add_wearer.vue";
import addDoc from "../../widgets/add_doc.vue";
import add_review from "../../widgets/add_review.vue";
import renew from "../../widgets/renew.vue";
import xmbdoc_dialog from "../../widgets/xmbdoc_dialog.vue";
import { mapState } from "vuex";
export default {
  components: {
    navBar,
    addWearer,
    addDoc,
    add_review,
    renew,
    xmbdoc_dialog,
  },
  data() {
    return {
      activeScrollTop: 0,
      checked: false,
      Receiver: {
        Receiver: "",
        RecievPhone: "",
        RecievAddress: "",
      },
      StarDreambVisionReviewInforIndex: -1,
      editStarDreambVisionReviewInfor: {},
    };
  },
  onLoad() {
    this.$store.dispatch("getChangeLensesRule");
    this.$store.dispatch("getReadWearerInfor");
    this.$store.dispatch("getAllShop");
    this.$store.dispatch("ReadChildInforProtectRule");
		if (this.selectedWearerIndex >= 0) {
			this.$store.dispatch("ReadStarDreambCurInfor");
		}
  },
  computed: {
    ...mapState([
      "wearers",
      "selectedWearerIndex",
      "StarDreambCurInfor",
      "StarDreambVisionReviewInfor",
    ]),
    htmlSnip() {
      const bodyContentMatch = this.$store.state.activityContent?.match(
        /<body[^>]*>([\s\S]*?)<\/body>/i
      );
      if (bodyContentMatch && bodyContentMatch[1]) {
        return bodyContentMatch[1];
      } else {
        return "";
      }
    },
    newestStarHistory() {
      if (this.StarDreambCurInfor.length > 0) {
        // last
        const last =
          this.StarDreambCurInfor[this.StarDreambCurInfor.length - 1] || {};
        this.$store.dispatch("ReadStarDreambVisionReviewInfor", last.VhId);
        return last;
      } else {
        return {};
      }
    },
  },
  watch: {
    selectedWearerIndex(newVal) {
      if (newVal >= 0) {
        this.$store.dispatch("ReadStarDreambCurInfor");
      }
    },
  },
  methods: {
    addWearer() {
      this.$refs.popupAddWearer.open();
    },
    selectWearer(index) {
      this.$store.commit("selectWearer", index);
    },
    onCancelAddWearer() {
      console.log("onCancelAddWearer");
      this.$refs.popupAddWearer.close();
    },
    onConfirmAddWearer(form) {
      console.log("onConfirmAddWearer", form);
      this.$refs.popupAddWearer.close();
      this.$store.dispatch("addEstablishWearerInfor", form);
    },
    editReview(index) {
      this.editStarDreambVisionReviewInfor =
        this.StarDreambVisionReviewInfor[index];
      this.addReview();
    },
    addReview() {
      if (!this.newestStarHistory.VhId) {
        uni.showToast({
          title: "请先添加星梦保档案",
          icon: "none",
        });
        return;
      }
      this.$refs.popupAddReview.open();
    },
    submitAddReview(form) {
      console.log("submitAddReview", form);
      this.$refs.popupAddReview.close();
      this.$store.dispatch("StarDreambVisionReview", {
        ...form,
        ActivateVisionId: this.newestStarHistory.VhId,
      });
    },
    onAddReviewDialogChange({ show }) {
      if (!show) {
        this.editStarDreambVisionReviewInfor = {};
      }
    },
    closeAddReview() {
      this.$refs.popupAddReview.close();
    },
    renew(index) {
      this.StarDreambVisionReviewInforIndex = index;
      this.$refs.popupRenew.open();
    },
    onPopupRenewChange(e) {
      // console.log('onPopupRenewChange', e);
      if (e.show) {
        this.$store.dispatch("ReadMemberReceive").then((data) => {
          // console.log("ReadMemberReceive", data);
          if (data.length) {
            this.Receiver = data[0];
          }
        });
      }
    },
    submitRenew(form) {
      console.log("submitRenew", form);
      this.$store.dispatch("ApplyChangeLensSubmit", {
        ...form,
        ActivateVisionId: this.newestStarHistory.VhId,
        VhId: this.StarDreambVisionReviewInfor[
          this.StarDreambVisionReviewInforIndex
        ].VhId,
      });
      this.$refs.popupRenew.close();
    },
    closeRenew() {
      this.$refs.popupRenew.close();
    },
    deleteReview(index) {
      this.$store.dispatch(
        "ReMoveVisionArchivesInfor",
        this.StarDreambVisionReviewInfor[index].VhId
      );
    },
    showXmbDoc() {
      if (this.StarDreambCurInfor.length > 0) {
        this.$refs.popupXmbDoc.open();
      }
    },
    closeXmbDocDialog() {
      this.$refs.popupXmbDoc.close();
    },
    activeXmbNow() {
      uni.navigateTo({
        url: "/pages/home/xmb?action=active",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  font-family: "yshst" !important;
  overflow-y: scroll;
}
.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
}
.bg {
  width: 100vw;
}
.wearers {
  position: absolute;
  bottom: 0;
  left: 10rpx;
  right: 10rpx;
  margin: 0 auto 160rpx auto;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  justify-content: center;
}
.add-user {
  width: 200rpx;
  min-width: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ic-add-user {
  width: 110rpx;
  height: 110rpx;
}
.wear-avatar.active {
  width: 130rpx;
  height: 130rpx;
  border-radius: 100rpx;
}
.wear-avatar {
  width: 110rpx;
  height: 110rpx;
  background-color: #9fdaff;
  border-radius: 55rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wear-icon {
  width: 110rpx;
  height: 110rpx;
}
.wear-icon.active {
  width: 130rpx;
  height: 130rpx;
  border-radius: 100rpx;
}
.wear-avatar-text {
  font-size: 50rpx;
  font-weight: bold;
  color: white;
}
.wear-relate {
  padding: 5rpx 10rpx;
  background-color: rgb(16, 18, 17);
  color: white;
  position: absolute;
  bottom: -10rpx;
  font-size: 20rpx;
  border-radius: 100rpx;
  left: auto;
  right: auto;
}
.add-user-text {
  margin-top: 10rpx;
}
.add-user-text.active {
  font-weight: bold;
  font-size: 40rpx;
  color: #3FBDFC;
}
.the-rule {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 35rpx 100rpx 0;
  text-decoration: underline;
  padding: 10rpx 0;
}
.bg2-container {
  width: 100vw;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #e5f2f9;
}
.bg2 {
  /* align-self: stretch; */
  /* width: 100vw; */
  width: calc(100% - 100rpx);
  border-radius: 30rpx;
  /* padding: 0 30rpx; */
  /* box-sizing: border-box; */
  /* margin: 0 30rpx; */
}
.bg2-container .button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 120rpx;
  height: 70rpx;
  width: 260rpx;
  background-color: #50c0f9;
  border-radius: 100rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.bg2-container .button.history {
  background-color: transparent;
  left: auto;
  right: 15rpx;
  bottom: 40rpx;
  text-decoration: underline;
  text-underline-offset: 5rpx;
}
.pop-content {
  /* background-color: white; */
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.pop-content .content-card {
  background-color: white;
  border-radius: 20rpx;
  width: calc(100vw - 40rpx);
  margin: 160rpx 25rpx;
  position: relative;
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.content-card .pop-title {
  height: 70rpx;
  background-color: #50c0f9;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35rpx;
}
.content-card .close {
  width: 20rpx;
  padding: 10rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}
.content-card .rich-text {
  padding: 20rpx;
  box-sizing: border-box;
  margin-top: 30rpx;
  flex: 1;
  overflow: scroll;
}
.content-card .star-history {
  padding: 20rpx;
  box-sizing: border-box;
  flex: 1;
  overflow: scroll;
}
.content-card .iknown {
  height: 60rpx;
  width: 300rpx;
  background-color: #50c0f9;
  border-radius: 100rpx;
  font-size: 30rpx;
  display: flex;
  /* color: white; */
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 30rpx 0;
}
.content-card .agree {
  height: 60rpx;
  width: 300rpx;
  background-color: #d5d5d5;
  border-radius: 100rpx;
  font-size: 30rpx;
  display: flex;
  /* color: white; */
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 0 30rpx 0;
}
.content-card .link {
  color: blue;
  text-decoration: underline;
  padding: 10rpx 0;
}
.star-history-item {
  height: 200rpx;
  background-color: whitesmoke;
  border-radius: 10rpx;
  padding-top: 10rpx;
}
.star-history-item + .star-history-item {
  margin-top: 20rpx;
}
.star-history-item .item-row {
  height: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20rpx;
}
.item-row .item-label {
  color: #999;
  width: 170rpx;
}
.card {
  z-index: 1;
  border-radius: 30rpx;
  background: white;
  margin-top: -140rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  overflow: hidden;
  flex-shrink: 0;
  .card-title {
    font-size: 40rpx;
    padding: 20rpx 0;
    background: #3fbdfc;
    color: black;
    text-align: center;
  }
  .card-row {
    padding: 25rpx 30rpx;
    color: black;
    display: flex;
    align-items: center;
    .row-key {
      width: 200rpx;
    }
    .row-value {
      flex: 1;
    }
    .detail-btn {
      color: #3fbdfc;
      text-align: center;
    }
    .active-btn {
      color: #3fbdfc;
      text-align: center;
      padding-top: 40rpx;
      padding-bottom: 40rpx;
    }
  }
  .card-divider {
    height: 1rpx;
    background: #e4f2fa;
    margin: 0 30rpx;
  }
}
.card2 {
  z-index: 1;
  border-radius: 30rpx;
  background: white;
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  .card-title {
    font-size: 40rpx;
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #e4f2fa;
    .add {
      font-size: 30rpx;
      color: #3fbdfc;
    }
  }
  .sub-card {
    border: 1rpx solid #e4f2fa;
    display: flex;
    flex-direction: column;
    border-radius: 15rpx;
    padding: 20rpx;
    margin: 30rpx;
    overflow: hidden;
    flex-shrink: 0;
    .sub-card-title {
      font-size: 35rpx;
      color: #3fbdfc;
      display: flex;
      .text {
        flex: 1;
      }
      .edit {
        font-size: 30rpx;
        color: #3fbdfc;
        width: 100rpx;
        text-align: center;
      }
      .delete {
        font-size: 30rpx;
        color: #666666;
        width: 100rpx;
        text-align: center;
      }
    }
    .time {
      margin-top: 20rpx;
      padding: 15rpx 0;
    }
    .card-row {
      display: flex;
      align-items: center;
      padding: 15rpx 0;
      .key {
        width: 100rpx;
      }
      .val1 {
        width: 150rpx;
        text-align: center;
      }
      .val2 {
        width: 150rpx;
        text-align: center;
      }
    }
    .apply {
      background: #9fdaff;
      color: black;
      padding: 10rpx 0;
      text-align: center;
      width: 300rpx;
      border-radius: 100rpx;
      margin-top: 10rpx;
      align-self: center;
    }
  }
}
</style>